<template>
    <div frame-component>
        <x-header class="frame-header"></x-header>
        <main>
            <x-nav class="frame-aside"></x-nav>
            <div class="frame-content">
                <router-view />
            </div>
        </main>
    </div>
</template>

<script>
import HeaderComponent from '../common/header.component'
import NavComponent from '../common/navigation.component'

export default {
    components:{
      'x-header':HeaderComponent,
      'x-nav':NavComponent
    }
}
</script>

<style scoped>
[frame-component]{
    display: flex;
    height: 100vh;
    flex-flow: column nowrap;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    box-sizing: border-box;
}

main{
    display: flex;
    flex-flow:row nowrap;
    flex: 1;
    overflow: hidden;
    box-sizing: border-box;
}

.frame-header{
    flex: 0 0 60px;
    background-color: #fff;
    border-bottom: 1px solid #dddee1;
    color: #fff;
    box-sizing: border-box;
}

.frame-nav{
    flex: 0 0 220px;
    overflow: auto;
    background-color: #fff;
    box-sizing: border-box;
}

.frame-content{
    overflow: auto;
    box-sizing: border-box;
    flex: 1;
    background: #eee;
}
</style>